import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Layout, Tabs } from 'antd';
import {LeftOutlined} from "@ant-design/icons";

const { Header, Content } = Layout;
const { TabPane } = Tabs;

const MyOrder = ({ children }) => {
    const navigate = useNavigate();
    const location = useLocation();

    const handleTabChange = (key) => {
        navigate(key);
    };
    const handleBack = () => {
        navigate('/user');
    }

    return (
        <Layout style={{ minHeight: '100vh', margin: 'auto', backgroundColor: '#fff' }}>
            <div className="header-container" style={{ textAlign: "center", display: "flex", alignItems: "center", padding: '15px' }}>
                <LeftOutlined onClick={handleBack} />
                <h2 style={{ textAlign: "center", margin: "0 auto" }}>订单</h2>
            </div>
            <Header style={{ backgroundColor: '#fff', padding: '15px' }}>
                <Tabs
                    activeKey={location.pathname}
                    onChange={handleTabChange}
                    centered
                    style={{ backgroundColor: '#fff' , fontWeight:'15px'}}
                >
                    <TabPane tab="全部订单" key="/myorder/all" />
                    <TabPane tab="待付款" key="/myorder/topay" />
                    <TabPane tab="待收货" key="/myorder/toreceive" />
                    <TabPane tab="售后" key="/myorder/aftersale" />
                </Tabs>
            </Header>
            <Content style={{ padding: '20px' }}>
                {children}
            </Content>
        </Layout>
    );
};

export default MyOrder;
